<!DOCTYPE html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div ng-app="myApp" ng-controller="myController">
			<!--<li ng-repeat="product in products">
				{{product}}
			</li>-->
			
			<table width="100%" border="1">
				<tr>
					<th>序号</th>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>价格</th>
				</tr>
			    <tr ng-repeat="product in products">
			    	<td>{{$index+1}}</td>
			        <td>{{product.id}}</td>
			        <td>{{product.name}}</td> 
			        <td>{{product.price}}</td> 
			    </tr>
			</table>
		</div>
	</body>

</html>
<script>
	var app = angular.module("myApp", []);
	app.controller("myController", ["$scope", function($scope) {
		$scope.products = [
		{
			"id": "001",
			"name": "苹果手机",
			"price":5000
		}, {
			"id": "002",
			"name": "三星手机",
			"price":2000
		}, {
			"id": "003",
			"name": "华为手机",
			"price":3000
		}]
	}])
</script>